<html>
<head lang="en">
    <meta charset="utf-8">
    <title>ECharts</title>
    </style>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="http://cdn.zaixianke.com/china.js"></script>    
    <script src="echarts.js"></script>
</head>
<body>
    <div id="china" style="height: 450px;width:750px;"></div>

   
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    
    <script>
            // 初始化echarts实例
            var myEcharts = echarts.init(document.getElementById("china"));
            var option = {
                title: {  //标题样式
                    text: '中国地图',
                    x: "center",
                    textStyle: {
                        fontSize: 23,
                        color: "black"
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        console.log(params)
                        if (params.name) {
                            return params.name + ' : ' + (isNaN(params.value) ? 0 : parseInt(params.value));
                        }
                    }
                },
                visualMap: {//视觉映射组件
                    top: 'bottom',
                    left: 'left',
                    min: 10,
                    max: 500000,
                    //text: ['High', 'Low'],
                    realtime: false,  //拖拽时，是否实时更新
                    calculable: true,  //是否显示拖拽用的手柄
                    inRange: {
                        color: ['purple', 'yellow', 'skyblue']
                    }
                },
                series: [
                    {
                        name: '模拟数据',
                        type: 'map',
                        mapType: 'china',
                        roam: false,//是否开启鼠标缩放和平移漫游
                        itemStyle: {//地图区域的多边形 图形样式
                            normal: {//是图形在默认状态下的样式
                                label: {
                                    show: true,//是否显示标签
                                    textStyle: {
                                        color: "purple"
                                    }
                                }
                            },
                            zoom: 1.5,  //地图缩放比例,默认为1
                            emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                label: {show: true}
                            }
                        },
                        top: "3%",//组件距离容器的距离
                        data: [
                            {name: '北京', value: 350000},
                            {name: '天津', value: 120000},
                            {name: '上海', value: 300000},
                            {name: '重庆', value: 92000},
                            {name: '河北', value: 25000},
                            {name: '河南', value: 20000},
                            {name: '云南', value: 500},
                            {name: '辽宁', value: 3050},
                            {name: '黑龙江', value: 80000},
                            {name: '湖南', value: 2000},
                            {name: '安徽', value: 24580},
                            {name: '山东', value: 40629},
                            {name: '新疆', value: 36981},
                            {name: '江苏', value: 13569},
                            {name: '浙江', value: 24956},
                            {name: '江西', value: 15194},
                            {name: '湖北', value: 41398},
                            {name: '广西', value: 41150},
                            {name: '甘肃', value: 17630},
                            {name: '山西', value: 27370},
                            {name: '内蒙古', value: 27370},
                            {name: '陕西', value: 97208},
                            {name: '吉林', value: 88290},
                            {name: '福建', value: 19978},
                            {name: '贵州', value: 94485},
                            {name: '广东', value: 89426},
                            {name: '青海', value: 35484},
                            {name: '西藏', value: 97413},
                            {name: '四川', value: 54161},
                            {name: '宁夏', value: 56515},
                            {name: '海南', value: 54871},
                            {name: '台湾', value: 48544},
                            {name: '香港', value: 49474},
                            {name: '澳门', value: 34594}
                        ]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myEcharts.setOption(option);
        </script>    
</body>
</html>
